import React from "react"
import { TabBar } from 'antd-mobile';
import {withRouter,Route} from "react-router-dom"

import Search from "../listresult/tabthree"
import Checkout from "../checkout/index"
import Mine from "../mine/index"
import Msite from "../msite/index"


class CartTabBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: '/msite',
      hidden: false,
      fullScreen: true,
      geohash:{}
    };
  }
  componentWillMount(){
     
      console.log(this.props)
      var geohash = JSON.parse(localStorage.getItem("geohash"))
      if(!geohash){
         geohash={
          latitude:"31.84178",
          longitude:"118.504669",
          name:"浦口区桥林街道横埂"
        }
      }
      this.setState({
          geohash:geohash
      })
      // this.props.history.push("/app/msite")
      this.props.history.push("msite?latitude="+geohash.latitude+"&longitude="+geohash.longitude+"&name="+geohash.name)
    //   if(this.props.location.pathname=="/home"){
    //       this.setState({
    //           hidden:true
    //       })
    //   }else{
    //     this.setState({
    //         hidden:false
    //     })
    //   }
  }
  componentWillReceiveProps(oldProps){
      console.log(this.props)
      //我们发现我们只有通过点击tabbar才会触发路由跳转
      //在url里输入路由并不会跳转，所以我们需要监控路由
      //因为我们输入url的话 我们是通过props里才有路由对象，只要输入urlprops就改变
      //props改变，componentWillReceiveProps就会触发
      //然后我们就能重新设置selectedTab的值
      console.log(1)
      console.log(oldProps.location) //可以看到location.pathname能拿到当前的路由 
      this.setState({
          selectedTab:oldProps.location.pathname
      })
  }

  render() {
    //   console.log(this.props)  //通过withRouter包裹后 拥有了路由属性
    let {latitude,longitude,name} =this.state.geohash
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#3e90e8"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="外卖"
            key="Life"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+require("../../assets/icons/elema.png")+') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+require("../../assets/icons/slelema.png")+') center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === '/app/msite'}
           
            onPress={() => {
              this.setState({
                selectedTab: '/app/msite',
              });
              this.props.history.push("msite?latitude="+latitude+"&longitude="+longitude+"&name="+name)
            }}
            data-seed="logId"
          > 
            <Route path="/app/msite" component={Msite} /> 
           
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require("../../assets/icons/zhinanzhen.png")+') center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require("../../assets/icons/slzhinanzhen.png")+') center center /  21px 21px no-repeat' }}
              />
            }
            title="分类"
            key="Koubei"
           
            selected={this.state.selectedTab === '/app/search'}
            onPress={() => {
              this.setState({
                selectedTab: '/app/search',
              });
              this.props.history.push("/app/search?sortid=211&name=全部分类")
            }}
            data-seed="logId1"
          >  
            <Route path="/app/search" component={Search} /> 
         
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require("../../assets/icons/dd.png")+') center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require("../../assets/icons/sldd.png")+') center center /  21px 21px no-repeat' }}
              />
            }
            title="订单"
            key="Friend"
          
            selected={this.state.selectedTab === '/app/order'}
            onPress={() => {
              this.setState({
                selectedTab: '/app/order',
              });
              this.props.history.push("order")
            }}
          >
           <Route path="/app/order" component={Checkout} /> 
          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: require("../../assets/icons/wode1.png") }}
            selectedIcon={{ uri: require("../../assets/icons/slwode1.png") }}
            title="我的"
            key="my"
            selected={this.state.selectedTab === '/app/mine'}
            onPress={() => {
              this.setState({
                selectedTab: '/app/mine',
              });
              this.props.history.push("mine")
            }}
          >
             <Route path="/app/mine" component={Mine} /> 
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default  withRouter(CartTabBar)